<template>
  <div :class="$style.wrap">
    <Button type="primary" @click="getDetail">编辑</Button>
    <el-dialog :visible.sync="visible" title="编辑" :close-on-click-modal="false" @close="resetForm" @opened="initData">
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item prop="officeName" label="办事处">
            <el-input v-model.trim="formData.officeName" disabled placeholder="办事处"></el-input>
          </el-form-item>
          <el-form-item prop="afterSaleCall" label="售后电话">
            <el-input v-model.trim="formData.afterSaleCall" number placeholder="请输入售后电话" clearable></el-input>
          </el-form-item>
          <el-form-item prop="contactPersonName" label="售后联系人">
            <el-input v-model.trim="formData.contactPersonName" placeholder="请输入售后联系人" clearable></el-input>
          </el-form-item>
          <el-form-item prop="accountNo" label="RTX账号">
            <el-input v-model.trim="formData.accountNo" placeholder="请输入RTX账号" clearable></el-input>
          </el-form-item>
          <el-form-item prop="contactPhone" label="售后联系人电话">
            <el-input v-model.trim="formData.contactPhone" number placeholder="请输入售后联系人电话" clearable></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注(最多50个字)" :autosize="{minRows: 4}" clearable></el-input>
            <p :class="$style.tip">还可以输入<span :class="$style.remark">{{ count }}</span>字</p>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="saveHandle">保存</Button>
            <Button type="primary" @click="visible=false">取消</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { validatPhone, validatPlane } from '@/utils/validate'
import { getOfficeAfterSaleArchive, putOfficeAfterSaleArchive } from '@/api/officeArchive'
export default {
  name: 'Edit',
  components: {
    FormContainer
  },
  props: {
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const validatorRemark = (r, v, c) => {
      if (v.length > 50) {
        c(new Error('字数超过限制'))
      } else {
        c()
      }
    }
    const validatorRTX = (r, v, c) => {
      if (/^[a-z]+\d*$/.test(v)) {
        c()
      } else {
        c(new Error('只能输入小写字母和数字且以字母开头'))
      }
    }
    const validatorTEL = (r, v, c) => {
      if (validatPhone(v) || validatPlane(v)) {
        c()
      } else {
        c(new Error('请输入正确格式的电话号码'))
      }
    }
    return {
      visible: false,
      detail: {},
      formData: {
        id: '',
        officeCode: '',
        officeName: '',
        contactPersonName: '',
        accountNo: '',
        afterSaleCall: '',
        contactPhone: '',
        remark: ''
      },
      formRules: {
        contactPersonName: [{ required: true, message: '请输入售后联系人', trigger: 'change' }],
        accountNo: [
          { required: true, message: '请输入RTX账号', trigger: 'change' },
          { required: true, validator: validatorRTX, trigger: 'change' }
        ],
        afterSaleCall: [
          { required: true, message: '请输入售后电话', trigger: 'change' },
          { required: true, validator: validatorTEL, trigger: 'change' }
        ],
        contactPhone: [
          { required: true, message: '请输入售后联系人电话', trigger: 'change' },
          { required: true, validator: validatorTEL, trigger: 'change' }
        ],
        remark: [
          { validator: validatorRemark, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    count() {
      const l = 50 - this.formData.remark.length
      return l >= 0 ? l : 0
    }
  },
  methods: {
    saveHandle() {
      return this.$refs.form.validate().then(() => {
        return putOfficeAfterSaleArchive(this.formData).then(res => {
          this.$message.success('修改成功！')
          this.$emit('refresh')
          this.visible = false
        })
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    initData() {
      this.resetForm()
      for (const key of Object.keys(this.formData)) {
        this.$set(this.formData, key, this.detail[key] || '')
      }
    },
    // 获取详情
    getDetail() {
      getOfficeAfterSaleArchive(this.row.id).then(res => {
        this.detail = res.data
        this.visible = true
      }).catch(() => {
        this.$message.error('获取详情失败！')
      })
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
    text-align: left;
    display: inline-block;
    & [class*="el-dialog__title"]{
        line-height: 40px !important;
    }
    & .tip{
        line-height: 1em;
        font-size: 14px;
        margin: 5px 0 0 0;
        & .remark{
            color: #F47171;
        }
    }
}
</style>
